// component/indexEcharts/echarts1/index.ts
import * as echarts from '../../ec-canvas/echarts'
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    data: {
      type: Array,
      value: []
    }
  },
  observers: {
    "data": function (newVal) {
      // console.log('图表数据',newVal)
      // console.log(x,data,data2)
      this.setData({
        list: newVal,
        ec: {
          onInit: function (canvas, width, height, dpr) {
            const initChart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr
            });
            initChart.setOption({
              title: {
                text: '年度换热站供热情况',
                left: 0,
                top: 0
              },
              tooltip: {
                trigger: 'axis',
                formatter: (params) => {
                  let html =
                    params[0].name + "\n";
                  for (let i = 0; i < params.length; i++) {
                    html +=
                      params[i].marker +
                      params[i].seriesName +
                      ": " +
                      (params[i].value ? params[i].value : '0') +
                      (params[i].seriesName == '累积热量' ? 'GJ' : 'm³') +
                      "\n";
                  }
                  return html;
                }
              },
              legend: {
                data: ['累积热量', '累积流量'],
                bottom: 0
              },
              grid: {
                top: "60px",
                left: "0px",
                right: "0px",
                bottom: "70px",
                // height: '170',
                // top: 100,
                // left:'5%',
                containLabel: true
              },
              color: ['#5194F8', '#FFC001'],
              dataZoom: {
                type: 'slider', // 滑块样式
                start: 0, // 默认起始位置
                end: 100, // 默认结束位置
                bottom:'50',
                height:'15'
              },
              xAxis: {
                data: newVal.map(item => item.heatExchangeStationName),
                axisLabel: {
                  show: true,
                  // interval: 0,
                  // rotate: 45,
                  formatter: function (value) {
                    // 设定最大长度
                    var maxLength = 6; // 最大长度，超过则显示省略号
                    // 检查是否需要截断
                    if (value.length > maxLength) {
                      // 截断并添加省略号
                      return value.substring(0, maxLength).split('').join('\n') + '\n' + '...';
                    } else {
                      // 不需要截断时，直接换行显示完整文本
                      return value.split('').join('\n');
                    }
                  }
                  // formatter: (params) => {
                  //   var newParamsName = "";
                  //   var paramsNameNumber = params.length;
                  //   var provideNumber = 2; //一行显示几个字
                  //   var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                  //   if (paramsNameNumber > provideNumber) {
                  //     for (var p = 0; p < rowNumber; p++) {
                  //       var tempStr = "";
                  //       var start = p * provideNumber;
                  //       var end = start + provideNumber;
                  //       if (p == rowNumber - 1) {
                  //         tempStr = params.substring(start, paramsNameNumber);
                  //       } else {
                  //         tempStr = params.substring(start, end) + "\n";
                  //       }
                  //       newParamsName += tempStr;
                  //     }
                  //   } else {
                  //     newParamsName = params;
                  //   }
                  //   return newParamsName;
                  // }
                }
              },
              yAxis: [
                {
                  name: '累积热量(GJ)',
                  position: 'left',
                  axisLine: {
                    show: true,
                    lineStyle: {
                      // color: "#fff",
                    },
                  },
                  splitLine: { show: false },
                },
                {
                  name: '累积流量(m³)',
                  position: 'right',
                  axisLine: {
                    show: true,
                    lineStyle: {
                      // color: "#fff",
                    },
                  },
                  splitLine: { show: false },
                },
              ],
              series: [
                {
                  type: 'bar',
                  barMaxWidth: '10',
                  barMinWidth: '5',
                  name: '累积热量',
                  data: newVal.map(item => item.heatCount),
                },
                {
                  type: 'bar',
                  barMaxWidth: '10',
                  barMinWidth: '5',
                  name: '累积流量',
                  data: newVal.map(item => item.fluxCount),
                  yAxisIndex: 1,
                },
              ],
            })
            canvas.setChart(initChart);
            return initChart;
          }
        }
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    },
    list: []
  },

  /**
   * 组件的方法列表
   */
  methods: {

  },
  //小程序声明周期
  lifetimes: {
    attached: async function () {
      // 在组件实例进入页面节点树时执行
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
})